<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
import { userStore } from '@/store/index.js'
import axios from "axios";
import {onMounted} from "vue";
const userItemStore = userStore()

const goLogin = ()=>{
  router.push("/login")
      .catch(err => err);
}
//判断用户是否已经登录
const isLogged = ()=>{
  axios.get("/user/isLogged").then(resp=>{
    const user = resp.data;
    //更新Pinia中用户信息
    userItemStore.updateUser(user);
    userItemStore.updateLoginStatus(true)
  }).catch(error => {
    console.log(`用户未登录 ${error}`);
  });
}

//退出
const logout = ()=>{
  axios.delete('/user/logout').then(resp=>{
    //删除本地存储
    localStorage.removeItem('token');
    localStorage.removeItem('user');
    //提示信息
    userItemStore.updateUser(null);
    userItemStore.updateLoginStatus(false);
    //跳转到主页
    goHome();
  })
      .catch(error => {
    console.log(`退出失败 ${error}`);
  });
}
//跳转到首页
const goHome=()=> {
  router.push("/").catch(err => err);
}

//跳转到首页
const goOrder=()=> {
  router.push("/OrderList").catch(err => err);
}
const home=()=> {
  router.push("/home").catch(err => err);
}

onMounted(()=>{
  isLogged();
})

</script>



<template>
  <!-- 顶部 -->
  <div>
    <el-row class="banner">
      <!-- 左边的logo -->
      <el-col :span="7">
        <img src="../assets/log.png" alt="蜗牛充电桩" style="width: 100px; height: auto;">
      </el-col>
      <!--  搜索文本框和按钮 -->
      <el-col :span="7">
        <el-input size="small" placeholder="搜索关键字" clearable style="width: 250px;"></el-input>
        <el-button size="small" type="primary" icon="el-icon-search">搜索</el-button>
      </el-col>
      <el-col :span="10" style="text-align: right">

        <!--  后面的按钮 -->

        <el-button-group>
          <template v-if="userItemStore.loggedIn">
          <el-button type="plain" size="small" ><el-icon><User /></el-icon>欢迎您：{{userItemStore.user.customerName}}</el-button>
          <el-button type="primary" size="small" @click="goCart"><el-icon><ShoppingCart /></el-icon>购物车</el-button>
          <el-button type="primary" size="small" ><el-icon><CollectionTag /></el-icon>我的收藏
          </el-button>
          <el-button type="primary" size="small" @click="goOrder"><el-icon><List /></el-icon>我的订单</el-button>
          <el-button type="primary" size="small" @click="home"><el-icon><List /></el-icon>个人中心</el-button>
          <el-button type="primary" size="small" @click="logout" ><el-icon><Bicycle /></el-icon>退出</el-button>
          </template>
          <template v-else>
          <el-button type="primary" size="small" @click="goLogin"><el-icon><Camera /></el-icon>登录/注册</el-button>
          </template>
          <!-- 无论是否登录都显示-->
          <el-button type="primary" size="small" icon="el-icon-s-home" @click="goHome"><el-icon><House /></el-icon>首页</el-button>
        </el-button-group>
      </el-col>
    </el-row>
  </div>
</template>
<style scoped>
.banner {
  display: flex;
  justify-content: center;
  /* 底部对齐 */
  align-items: flex-end;
  padding: 5px;
  top: 0;
  left: 0;
  width: 100%;
  /* 左上角到右下角 */
  background: linear-gradient(to bottom right, #a9dff4, #688df4, #eef2ce);
}
</style>